{% extends "layout.html" %}
{% block title %}Origin{% endblock %}
{% block content %}

{% if message is not none %}
{{ message }}
{% endif %}

{% if origin is not none %}

<!-- Flot plugin dependencies -->
{% for fname in ['js/calendar.js', 'lib/jquery.flot.min.js', 'lib/jquery.flot.time.min.js', 'lib/jquery.flot.selection.min.js', 'lib/jquery.flot.tooltip.min.js'] %}
<script language="javascript" type="text/javascript" src="{{ url_for('static', filename=fname) }}"></script>
{% endfor %}

<!-- Timeline result -->
<h2>Origin visit history</h2>
<div class="timeline">
  <div id="swh-calendar-window" style="height: 200px">
    <div id="cal-zoom-window" style="height: 60%"></div>
    <div id="cal-static-window" style="height: 40%"></div>
  </div>
  <button id="cal-clear">Reset</button>
</div>

<!-- Data result -->
<h2>Origin information</h2>
<div> Details on origin {{ origin['id'] }}:
  {% for key in ['type', 'lister', 'project', 'url'] %}
  {% if origin[key] is not none %}
  <div class="row">
    <div class="col-md-2">{{ key }}</div>
    <div class="col-md-6">{{ origin[key] }}</div>
  </div>
  {% endif %}
  {% endfor %}
  {% if 'decoding_failures' in content %}
  <div class="row">
    <div class="col-md-10">(some decoding errors)</div>
  </div>
  {% endif %}
</div>

<!-- Flot calendar setup -->
<script>$(function(){var cal = new Calendar('{{ browse_url }}', '{{ visit_url }}', {{ origin['id'] }}, $('#cal-zoom-window'),  $('#cal-static-window'),  $('#cal-clear'));});</script>
{% endif %}

{% endblock %}